<template>
  <div class="Ulogin">
      <el-row>
            <el-alert
                :closable='false'
                v-if="errorInfo"
                :title="errorInfo"
                style="margin-bottom: 10px"
                type="warning"
                center
                show-icon>
            </el-alert>
            <el-col><el-input placeholder="用户名" v-model="userLogin.nickname"></el-input></el-col>
            <el-col><el-input type="password" placeholder="登陆密码" v-model="userLogin.passWord"></el-input></el-col>
            <el-col class="verificaCodeInput">
                <el-input placeholder="验证码" v-model="userLogin.verificaCode"></el-input>
                <div @click="reloadVerificaCode()" class="verificaCode" v-html="verificationCode"></div>
            </el-col>
          <el-col><el-checkbox v-model="userLogin.agree">同意用户登陆/注册协议</el-checkbox></el-col>
          <el-col style="text-align: right"><el-button @click="signIn()">登陆</el-button></el-col>
      </el-row>
  </div>
</template>

<script>
import { mapMutations, mapGetters, mapActions} from 'vuex';
export default {
    data() {
        return {
            userLogin: {
                nickname: '',
                passWord: '',
                verificaCode: '',
                agree: true
            },
            errorInfo: ''
        }
    },
    computed: {
        ...mapGetters(['verificationCode'])
    },
    watch: {
        errorInfo() {
            if (this.errorInfo) {
                setTimeout(() => {
                    this.errorInfo = ''
                }, 2000);
            }
        }
    },
    methods: {
        ...mapMutations({
            setSignVisible: 'SET_SIGNVISIBLE'
        }),
        ...mapActions({
            getVerificationCode: "getVerificationCode",
            userLoginFun: 'userLogin'
        }),
        reloadVerificaCode() {
            this.getVerificationCode({
                type: 'login'
            });
        },
        async signIn() {
            if (!this.userLogin.nickname || !this.userLogin.passWord) {
                this.errorInfo = `输入用户名，密码`
                return;
            }
            if (!this.userLogin.agree) {
                this.errorInfo = `必须同意用户登陆协议`
            }
            let data = await this.userLoginFun(this.userLogin);
            if (data.code !== 0) {
                this.errorInfo = data.msg
                return;
            }
            this.setSignVisible(false)
            this.$notify({
                message: '登陆成功!',
                type: 'success',
                offset: 50,
                duration: 3000
            });
            setTimeout(() => {
                window.location.reload()
            }, 800);
        }
    },
    mounted() {
        this.getVerificationCode({
            type: 'login'
        });
    }
}
</script>
